<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title" id="title">顶部选项卡-div模式</h1>
		</header>
		<div class="mui-content" style="background-color: transparent;">
			<div class="mui-row" style="padding: 10px;">
				<img class="mui-pull-left" v-bind:src="book.cover" style="height: 150px;width: 40%;">
				<div class="mui-pull-left" style="margin-left: 10px;border: solid red 0px; width: 55%;">
					<br />
					<h3 v-html="book.title">幸福</h3>
					<h4 v-html="book.author" style="padding-top: 5px;">作者</h4>
					<h4 style="padding-top: 5px;">
						<span>3天前</span>|<span v-html="book.wordCount"></span>字|<span v-html="book.cat"></span>
					</h4>
				</div>
			</div>
			<div class="mui-row">
				<ul class="mui-table-view mui-grid-view mui-grid-9" style="background-color: transparent;">
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
	                    <span>追书人气</span>
	                    <h4 class="mui-media-body" v-html="book.latelyFollower">Home</h4>
		            </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		            	<span>读者留存率</span>
						<h4 class="mui-media-body" v-html="book.retentionRatio">66.41%</h4>
		            </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		            	<span>日更新字数</span>
		            	<h4 class="mui-media-body" v-html="book.serializeWordCount"></h4>
		            </li>
		        </ul> 
			</div>
			<div class="mui-button-row">
				<button type="button" class="mui-btn mui-btn-primary">追更新</button>
				<button type="button" class="mui-btn mui-btn-primary" v-on:click="openWindow()">开始阅读</button>
			</div>
			<div class="mui-row" style="margin-top: 10px;">
				<div  v-for="item in book.tags" style="float: left;margin: 5px;">
					<button type="button" class="mui-btn mui-btn-danger mui-btn-outlined" v-html="item">
					</button>
				</div>
			</div>
			<div class="mui-row" style="padding: 10px;">
				<p style="color: #333;">
					&nbsp;&nbsp;&nbsp;&nbsp;
					<span  v-html="book.longIntro"></span>
				</p>
			</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/vue.min.js"></script>
		<script src="../js/app.js"></script>
		<script type="text/javascript">
			mui.init({
				swipeBack:true //启用右滑关闭功能
			});
			function getDefaultData() {
				return {
					"_id": "548d9c17eb0337ee6df738f5",
					"longIntro": "一代兵王含恨离开部队，销声匿迹几年后，逆天强者强势回归都市，再度掀起血雨腥风！简单粗暴是我的行事艺术，不服就干是我的生活态度！看顶级狂少如何纵横都市，书写属于他的天王传奇！依旧极爽极热血！ ",
					"cover": "/agent/http%3A%2F%2Fimg.1391.com%2Fapi%2Fv1%2Fbookcenter%2Fcover%2F1%2F683354%2F683354_842cde2d37314835a8e8f176de8f297e.jpg%2F",
					"author": "烈焰滔滔",
					"minorCateV2": "热血兵王",
					"minorCate": "都市生活",
					"majorCate": "都市",
					"title": "最强狂兵",
					"rating": {
						"count": 28181,
						"score": 8.75,
						"isEffect": true
					},
					"contentType": "txt",
					"allowMonthly": true,
					"allowVoucher": true,
					"allowBeanVoucher": true,
					"postCount": 21402,
					"latelyFollower": 43236,
					"followerCount": 0,
					"wordCount": 11893117,
					"serializeWordCount": 6784,
					"retentionRatio": "66.41",
					"updated": "2019-05-14T11:02:22.605Z",
					"isSerial": true,
					"chaptersCount": 3717,
					"lastChapter": "正文 第3716章 圣骑士团！",
					"gender": ["male"],
					"tags": ["强者回归", "扮猪吃虎", "无敌流", "热血", "爽文", "特种兵", "称霸都市", "都市"],
					"advertRead": true,
					"cat": "都市生活",
					"copyrightDesc": "本书由上海元聚进行电子本制作与发行",
					"discount": null
				}
			}
			var vm = new Vue({
				el: '.mui-content',
				data: {
					summary:[{
							"_id":"568fef99adb27bfb4b3a58dc",
							"name":"优质书源",
							"lastChapter":"正文 第3718章 孩子你看，金戈铁马",
							"source":"zhuishuvip",
							"link":"http://vip.zhuishushenqi.com/toc/568fef99adb27bfb4b3a58dc",
							"isCharge":false,
							"chaptersCount":3719,
							"updated":"2019-05-16T00:51:22.462Z",
							"starting":true,
							"host":"vip.zhuishushenqi.com"
						}
					],
					book:getDefaultData()
				}
			});
			mui.plusReady(function(){
				var self = plus.webview.currentWebview();
				var title = document.getElementById("title");
				title.innerHTML = self.title;
				var keyValue = self.keyValue;
				
				plus.nativeUI.showWaiting("正在加载数据，请稍等...");
				mui.getJSON("http://api.zhuishushenqi.com/book/"+keyValue, {}, function(rsp) {
					plus.nativeUI.closeWaiting();
					console.log(JSON.stringify(rsp));
					if(rsp.ok && rsp.ok == false){
						return;
					}
					//vm.keyValue = rsp._id;
					var book = rsp;
					if(book != undefined){
						book.cover ="http://statics.zhuishushenqi.com"+ book.cover;
					}
					vm.book = book;
				});
				/*获取小说正版源*/
				plus.nativeUI.showWaiting("正在加载数据，请稍等...");
				mui.getJSON("http://api.zhuishushenqi.com/btoc?view=summary&book="+keyValue, {}, function(rsp) {
					plus.nativeUI.closeWaiting();
					console.log(JSON.stringify(rsp));
					if(rsp.ok && rsp.ok == false){
						plus.nativeUI.alert(rsp.msg);
						return;
					}
					vm.summary = rsp;
				});
			});
			
			function openWindow(){
				if(vm.summary && vm.summary.length <=0)
				{
					mui.toast("未能找到资源！");
					return;
				}
				/*2019-05-19 侯连文 保存读者阅读信息*/
				app.setClassify(vm.book.cat,vm.book.cat);
				app.setBook(vm.book._id,vm.book);
				
				mui.openWindow({id: 'bookread.html',url: 'bookread.html'
					,show: {aniShow: 'pop-in'}
					,extras: {    //extras里面的就是参数了
	                	keyValue: vm.book._id,
	                	title:vm.book.title,
	                	sourceId:vm.summary[0]._id,
	           		}
					,waiting: {
						autoShow: true, //自动显示等待框，默认为true
	           		}
  				});
			}
		</script>
	</body>

</html>